<template>
  <div
    v-if="isShow"
    class="toast"
  >
    <img
      v-if="type=='success'"
      src="../../assets/success.png"
      class="img"
      alt=""
    >
    <img
      v-if="type=='error'"
      src="../../assets/error.png"
      class="img"
      alt=""
    >
    <span :class="`toast-hauner-${type}`">{{ msg }}</span>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  msg: {
    type: String,
    default: 'message',
  },
  duration: {
    type: Number,
    default: 3000,
  },
  type: {
    type: String,
    default: '',
  },
})

const emit = defineEmits(['update:show'])
const isShow = ref(props.show)

watch(() => props.show, (newVal, oldVal) => {
  isShow.value = newVal
  if (newVal) {
    clearInterval(timer)
    var timer = setTimeout(() => {
      isShow.value = false
      emit('update:show', false)
    }, props.duration)
  }
})
</script>

<style lang="scss" scoped>
.toast {
  position: fixed;
  z-index: 1004;
  display: flex;
  align-items: center;
  border-radius: 8px;
  background-color: #fff;
  /* Light/Elevation/shadow-md */
  box-shadow: 0 4px 10px 0 rgba(46, 38, 61, 20%);
  color: #2e263de5;
  font-size: 16px;
  inset-block-start: 200px;
  inset-inline-start: 50%;
  padding-block: 13px;
  padding-inline: 28px;
  transform: translateX(-50%);
  &-hauner-success{
    color: '#67C23A'
  }
  &-hauner-warning{
    color: '#E6A23C'
  }
  &-hauner-error{
    color: '#F56C6C'
  }
  &-hauner-info{
    color: '#909399'
  }
}

.img {
  block-size: 25px;
  inline-size: 25px;
  margin-inline-end: 5px;
}
</style>
